<template>
  <v-app app>
    <v-app-bar class="px-md-15" hide-on-scroll dark app dense color="#333" flat>
      <v-tabs>
        <v-tab v-for="item in appBar.links" :key="item">{{ item }}</v-tab>
      </v-tabs>
      <v-spacer></v-spacer>
      <v-btn v-for="item in appBar.user" :key="item" text>{{ item }}</v-btn>
      <v-badge overlap offset-y="17" offset-x="17" content="6">
        <v-btn @click="appBar.drawer = !appBar.drawer" color="red" dark
          >购物车
          <v-icon dense>mdi-cart-outline</v-icon>
        </v-btn>
      </v-badge>
    </v-app-bar>

    <v-navigation-drawer
      v-model="appBar.drawer"
      app
      right
      temporary
    ></v-navigation-drawer>

    <nuxt />
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      appBar: {
        drawer: null,
        links: ['小米商城', 'MIUI', '云服务', '小爱开放平台', '企业团购'],
        user: ['登陆', '注册', '消息通知'],
      },
    }
  },
  created() {
    this.appBar.drawer = false
  },
}
</script>

<style lang="scss">
.v-app-bar {
  .v-toolbar__extension {
    padding: 0px;
  }
}
</style>
